import {Row, Col, Collapse, Tooltip} from 'antd'
import {connect} from 'umi'
import React, {useState, useEffect} from 'react'
import CustomTable from '@/components/Table'
import cardStyles from '../../index.less'
import styles from './index.less'

const {Panel} = Collapse

function Basis(props: any) {
	const {info} = props
	const [tableList, setTableList] = useState<any[]>([])
	const [clumes, setClumes] = useState<any[]>([])
	const [clumAddList, setClumAddList] = useState<any[]>([])
	const [codeStaus, setCodeStaus] = useState(1) // code码状态
	const [bdStatus, setBdStatus] = useState(1) // BD状态
	const goodsColumns = [
		// {
		//   title: '产品方案ID',
		//   dataIndex: 'planNo',
		//   align: 'center',
		//   width:200
		// },
		{
			title: '产品方案名称',
			dataIndex: 'planName',
			align: 'center',
			width: 150,
		},
		{
			title: '主体',
			dataIndex: 'subjectName',
			width: 100,
		},
		{
			title: '公司',
			dataIndex: 'affiliatedCompany',
			width: 100,
		},
		{
			title: '城市',
			dataIndex: 'cityName',
			width: 100,
		},
		{
			title: '开始时间',
			dataIndex: 'beginTime',
			width: 150,
			render: (text: any) => (
				<span>{text ? text.split(' ')[0] : ''}</span>
			),
		},
		{
			title: '结束时间',
			dataIndex: 'endTime',
			width: 150,
			render: (text: any) => (
				<span>{text ? text.split(' ')[0] : ''}</span>
			),
		},
		{
			title: '品牌/车型/车系',
			dataIndex: 'applicableGoods',
			align: 'center',
			width: 150,
		},
		{
			title: '星级',
			dataIndex: 'carStar',
			width: 100,
		},
		{
			title: '订单类型',
			dataIndex: 'rentTypename',
			align: 'center',
			width: 100,
		},
		{
			title: '租期',
			dataIndex: 'tenancy',
			align: 'center',
			width: 100,
			key: 'tenancy',
		},
		{
			title: '方案状态',
			dataIndex: 'schemeStatus',
			width: 150,
			render: () => <span>有效</span>,
		},
		{
			title: '审核状态',
			dataIndex: 'auditStatus',
			width: 150,
			render: () => <span>审核通过</span>,
		},
	]
	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	const clumeList = () => {
		const clumAddLists: any = []
		info?.plan?.planFeeList?.forEach((res: any) => {
			const clumeObj: any = {
				title: res.feeItemName,
				align: 'center',
				dataIndex: res.feeItemName,
				width: 150,
			}
			clumAddLists.push(clumeObj)
		})
		setClumAddList(clumAddLists)
	}
	useEffect(() => {
		const arr = [...goodsColumns, ...clumAddList]
		setClumes(arr)
	}, [clumAddList])

	useEffect(() => {
		if (info?.plan) {
			const nameList: any = info?.plan?.planFeeList
			nameList?.forEach((res: any) => {
				info.plan[res.feeItemName] = res.feeItemAmount
			})
			const list: object[] = []
			list.push(info?.plan)
			if (list.length > 0) {
				setTableList(list)
			}
		}

		clumeList()
	}, [info])

	useEffect(() => {
		if (info) {
			if (info?.order?.channelType) {
				const date1 = info?.order?.channelType.split(',')[1]
				// 车司
				if (date1 === '2') {
					setCodeStaus(1)
				} else if (date1 === '1' || date1 === '3') {
					setCodeStaus(2)
				} else if (date1 === '4' || date1 === '5') {
					setCodeStaus(2)
					setBdStatus(2)
				}
			} else {
				setCodeStaus(2)
				setBdStatus(2)
			}
		}
	}, [info])
	return (
		<div className={cardStyles.card} id="basis">
			<Collapse
				defaultActiveKey={['1', '2']}
				ghost
				expandIconPosition="end">
				<Panel header={customizeHeader('基础信息')} key="1">
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>订单编号：</div>
							<div className={cardStyles.value}>
								{info?.orderCarNo}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>创建时间：</div>
							<div className={cardStyles.value}>
								{info?.createTime}
							</div>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>司机名称：</div>
							<div className={cardStyles.value}>
								{info?.order?.lesseeName}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>所属公司：</div>
							<div className={cardStyles.value}>
								{info?.order?.companyName}
							</div>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>联系电话：</div>
							<div className={cardStyles.value}>
								{info?.order?.lesseeTel}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>渠道名称：</div>
							<div className={cardStyles.value}>
								{info?.order?.channelName}
							</div>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>联系地址：</div>
							<div className={cardStyles.value}>
								{info?.order?.lesseeAddress}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>备注：</div>
							<Tooltip placement="topLeft" title={info?.remark}>
								<div
									className={cardStyles.value}
									style={{
										whiteSpace: 'nowrap',
										overflow: 'hidden',
										textOverflow: 'ellipsis',
									}}>
									{info?.remark}
								</div>
							</Tooltip>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>租赁开始日：</div>
							<div className={cardStyles.value}>
								{info?.startTime}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>租赁结束日：</div>
							<div className={cardStyles.value}>
								{info?.finishTime}
							</div>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>付款方式：</div>
							<div className={cardStyles.value}>
								{info?.paymentMethodname}
							</div>
						</Col>
						<Col span={12} className={cardStyles.col}>
							<div className={cardStyles.label}>付款日：</div>
							<div className={cardStyles.value}>
								{info?.paymentDay}
							</div>
						</Col>
					</Row>
					<Row gutter={24} className={cardStyles.rows}>
						{codeStaus === 2 && (
							<Col span={12} className={cardStyles.col}>
								<div className={cardStyles.label}>code码：</div>
								<div className={cardStyles.value}>
									{info?.order?.channelCode}
								</div>
							</Col>
						)}
						{bdStatus === 2 && (
							<Col span={12} className={cardStyles.col}>
								<div className={cardStyles.label}>跟单BD：</div>
								<div className={cardStyles.value}>
									{info?.order?.channelBdName}
								</div>
							</Col>
						)}
					</Row>
					<CustomTable
						key="planNo"
						columns={clumes}
						pagination={false}
						total={0}
						callback={() => {}}
						loading={false}
						dataSource={tableList}
					/>
				</Panel>
			</Collapse>
		</div>
	)
}

export default connect(({order: {details}}: any) => ({details: {...details}}))(
	Basis,
)
